<div id="reportonlinesummary">
    <Row style="margin: 10px;">
        <div style="height: 100%;text-align:right;" class="fl">{{$t("reportForm.selectAccount")}} : &nbsp;</div>
        <div style="position: relative;width: 300px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSearchVal" @on-change="searchValueChange" @on-blur="blur" @on-focus="focus" :readonly="readonly" @on-click="focus" :placeholder="placeholder"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <Tree :data="treeData" @on-check-change="onCheckedDevice"></Tree>
                    </div>
                </transition>
            </div>
        </div>
        <div style="height: 100%;text-align:right;margin-left: 10px;" class="fl">
            <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
        </div>
        <div style="margin-left:10px;" class="rt">
            <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </Row>
    <Row style="margin: 10px;border: 1px solid #DCDEE2;text-align: center;">
        <div style="height: 100%;line-height:32px;display: inline-block;">{{$t("reportForm.vehicleTotal")}} :&nbsp;<span v-text="totalVehicle"></span>&nbsp;&nbsp;</div>
        <div style="height: 100%;line-height:32px;display: inline-block;">{{$t("reportForm.onlineTotal")}} :&nbsp;<span v-text="onlineVehicle"></span>&nbsp;&nbsp;</div>
        <div style="height: 100%;line-height:32px;display: inline-block;">{{$t("reportForm.offlineTotal")}} :&nbsp;<span v-text="offlineVehicle"></span>&nbsp;&nbsp;</div>
        <div style="height: 100%;line-height:32px;display: inline-block;">{{$t("reportForm.locationTotal")}} :&nbsp;<span v-text="posiVehicle"></span>&nbsp;&nbsp;</div>
        <div style="height: 100%;line-height:32px;display: inline-block;">{{$t("reportForm.notLocationTotal")}} :&nbsp;<span v-text="notPosiVehicle"></span>&nbsp;&nbsp;</div>
    </Row>
    <div style="margin:10px;">
        <i-table ref="table" :columns="columns" size="small" size="small" :height="tableHeight" :data="tableData" :loading="loading"></i-table>
    </div>
</div>